<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  <title>Select美化-download by http://www.codefans.net</title>
  <style type="text/css">
    body{ background-color: #cfdfef; FONT: 12px/150% "Lucida Grande", Arial, Verdana, Helvetica, sans-serif}
    a{ text-decoration:none;outline:none;hide-focus:expression(this.hideFocus=true);}
    .selectBox{width:100px}
    .selectBox a{
      display:block; background:url(./jscss/demoimg/201110/selectBG.gif) left top;padding-left:10px; color:#79a2bd;
      line-height:24px!important;line-height:26px;height:24px; overflow:hidden;
    }
    .selectBox a:hover{background-position:left -24px}
    .selectBox a:hover.open,.selectBox a.open{background-position:left -48px}
    .selectBox p{
      margin:0; padding:0;display:none; position: absolute; width:100px;
      background:url(selectBG.gif) left bottom; padding-bottom:6px;
    }
    .selectBox p a{background-position:left -160px}
    .selectBox p a.current{background-position:left -96px; color:#fff}
    .selectBox p a:hover{background-position:left -72px; color:#fff}
  </style>
  <script type="text/javascript" src="../../vendor/jquery1.3.2.js"></script>
  <script type="text/javascript">
    $(document).ready(function(){
      var newSelect = $("#aa");
      newSelect.click(function(e){
        if(this.className == "open"){
          closeSelect(this);
        }else{
          this.className = "open";
          $(this.nextSibling).slideDown("fast");
        }
        e.stopPropagation();
      });

      function closeSelect(obj){
        $(obj.nextSibling).slideUp("fast",function(){
          obj.className = "";
        });
      }
      $(document).bind("click", function() {
        closeSelect(newSelect[0]);
      });

      newSelect.next().click(function(e){
        var src = e.target;
        if(src.tagName == "A"){
          var PObj = src.parentNode;
          PObj.previousSibling.innerHTML = src.innerHTML;
          /*var aList = PObj.getElementsByTagName("a");
          for(var i=0;i<aList.length;i++){
              aList[i].className = "";
          }*/
          $(src).siblings().removeClass();
          src.className = "current";
          PObj.nextSibling.value = src.getAttribute("value");
        }
      });
    });
  </script>
</head>

<body>
<div class="selectBox">
  <a href="javascript:void(0);" id="aa">请选择类别</a><p>
  <a href="javascript:void(0)" class="current" value="">请选择类别</a>
  <a href="javascript:void(0)" value="dc">数码相机</a>
  <a href="javascript:void(0)" value="lcd">液晶显示器</a>
  <a href="javascript:void(0)" value="mobile">智能手机</a>
  <a href="javascript:void(0)" value="oven">微波炉</a>
</p><input type="hidden" name="category" id="category" value="no" />
</div>
<input type="button" onclick="alert($('#category').val());" value="取值" />
</body>
</html>
